<template>
  <div class="nav">
    <el-backtop :bottom="100">↑</el-backtop>
    <div class="nav1">
      <!-- 第一部分区域 -->
      <div class="header">
        <!-- 导航栏区域 -->
        <el-row>
          <!-- 左侧图标栏 -->
          <el-col :xs="4" :sm="4" :md="6" :lg="6" :xl="6">
            <h1>
              <a href="#" class="logo">
                <img src="http://style.wuliwu.top/LOGO" />
              </a>
            </h1>
          </el-col>
          <!-- 右侧链接栏 -->
          <el-col class="hidden-sm-and-down" :xs="20" :sm="20" :md="18" :lg="18" :xl="18">
            <el-row>
              <ul>
                <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                  <li>
                    <a href="#">首页</a>
                  </li>
                </el-col>
                <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                  <li>
                    <a href="#">关于</a>
                  </li>
                </el-col>
                <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                  <li>
                    <a href="#">业务咨询</a>
                  </li>
                </el-col>
                <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                  <li>
                    <a href="#">新闻资讯</a>
                  </li>
                </el-col>
                <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                  <li>
                    <a href="#">加入我们</a>
                  </li>
                </el-col>
                <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                  <li>
                    <a href="#">联系我们</a>
                  </li>
                </el-col>
              </ul>
            </el-row>
          </el-col>
          <el-col class="hidden-sm-and-up" :xs="20" :sm="20" :md="18" :lg="18" :xl="18">
            <el-dropdown>
              <el-button type="primary">
                更多菜单
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <a href="#">首页</a>
                </el-dropdown-item>
                <el-dropdown-item>
                  <a href="#">关于</a>
                </el-dropdown-item>
                <el-dropdown-item>
                  <a href="#">业务咨询</a>
                </el-dropdown-item>
                <el-dropdown-item>
                  <a href="#">新闻资讯</a>
                </el-dropdown-item>
                <el-dropdown-item>
                  <a href="#">加入我们</a>
                </el-dropdown-item>
                <el-dropdown-item>
                  <a href="#">联系我们</a>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
        <!-- 第一部分背景区域 -->
        <div class="main">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <div class="main_01">
                <h2>
                  乔克科技
                  <br />面向全球的跨境电商
                </h2>
                <p>
                  多年海外互联网大数据营销经验
                  <br />海外社交媒体+自营商城新型营销模式
                </p>
                <el-button type="primary ">了解详情</el-button>
              </div>
            </el-col>
            <!-- 右中图片区域 -->
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <div class="main_02">
                <el-image src="http://cdn.wuliwu.top/cen" fit="contain"></el-image>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 第二部分区域 -->
      <div class="aside">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div class="aside_01">
              <el-image src="http://cdn.wuliwu.top/girlnight" fit="contain"></el-image>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div class="aside_02">
              <h2>乔克科技</h2>
              <p>乔克网络科技有限公司，是一家面向全球的B2C跨境电商公司。前身专注于海外移动互联网大数据营销，并拥有长达5年以上的经验与资源。我们正式成立于2017年，总部诞生于深圳，在长沙、衡阳和香港均设有子公司。</p>
              <ul>
                <li>
                  <span>3</span>
                  <br />
                  <i>分公司</i>
                </li>
                <li>
                  <span>180+</span>
                  <br />
                  <i>在职员工</i>
                </li>
                <li>
                  <span>100+</span>
                  <br />
                  <i>用户分布国家</i>
                </li>
              </ul>
              <el-button type="primary">了解详情</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 第三部分区域 -->
      <div class="three">
        <h3>业务介绍</h3>
        <p>开创以客户需求为主导，自主开发新品，提供个性化的购物体验，数万种产品通过Facebook、</p>
        <p>Google、 自营平台、第三方平台等多种渠道销售至全世界。</p>
        <el-row>
          <ul>
            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
              <li>
                <a href="#">
                  <el-image src="http://cdn.wuliwu.top/girlcat" fit="cover"></el-image>
                  <h4>自建平台</h4>
                  <p>直接面对用户，不断获取反馈 持续优化产品</p>
                </a>
              </li>
            </el-col>
            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
              <li>
                <a href="#">
                  <el-image src="http://cdn.wuliwu.top/girleat" fit="cover"></el-image>
                  <h4>自建平台</h4>
                  <p>直接面对用户，不断获取反馈 持续优化产品</p>
                </a>
              </li>
            </el-col>
            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
              <li>
                <a href="#">
                  <el-image src="http://cdn.wuliwu.top/fkdmks" fit="cover"></el-image>
                  <h4>自建平台</h4>
                  <p>直接面对用户，不断获取反馈 持续优化产品</p>
                </a>
              </li>
            </el-col>
            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
              <li>
                <a href="#">
                  <el-image src="http://cdn.wuliwu.top/girlhat" fit="cover"></el-image>
                  <h4>自建平台</h4>
                  <p>直接面对用户，不断获取反馈 持续优化产品</p>
                </a>
              </li>
            </el-col>
          </ul>
        </el-row>
      </div>
      <!-- 招聘栏区域 -->
      <div class="adv">
        <h3>校招</h3>
        <p>选择乔克，选择未来</p>
        <el-button type="primary">了解详情</el-button>
      </div>
    </div>
    <!-- 底部介绍栏 -->
    <div class="footer">
      <!-- 宽度限制区域 -->
      <div class="footer_01">
        <!-- 左侧区域 -->
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <h2>乔克科技</h2>
            <ul>
              <li>
                <a href="#">关于乔克</a>
              </li>
              <li>
                <a href="#">业务资讯</a>
              </li>
              <li>
                <a href="#">加入我们</a>
              </li>
              <li>
                <a href="#">联系我们</a>
              </li>
            </ul>
          </el-col>
          <!-- 右侧区域 -->
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <h5>Email</h5>
                <p>carrycry@outlook.com</p>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <h5>Contact Phone</h5>
                <p>+86 18657302512</p>
              </el-col>
            </el-row>
            <el-row>
              <h5>Address</h5>
              <p>浙江省嘉兴市秀洲区666号</p>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="foot">
      <p>浙ICP备19040733号</p>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
/* 相当于body */
.nav {
  font: 14px/1.5 '微软雅黑', Arial, '黑体';
  width: 100%;
  height: 100%;
  background: url(http://cdn.wuliwu.top/girlplane) no-repeat center top;
}
/* 整个页面宽占比 */
.nav1 {
  width: 90%;
  max-width: 1170px;
  margin: 0 auto;
}
.hidden-sm-and-up {
  margin: auto;
  line-height: 90px;
  text-align: right;
}
.hidden-sm-and-down li {
  text-align: center;
  border-bottom: 2px #00d584 solid;
  margin: 0 5px;
}
.hidden-sm-and-down a {
  text-decoration: none;
  height: 60px;
  line-height: 60px;
  color: #fff;
  font-size: 16px;
}
/* 第一部分中间区域 */
.main {
  text-align: center;
  color: #fff;
  margin: 20px 0;
}
.main_01 {
  padding: 40px 0;
  text-align: left;
}
.main_01 h2 {
  font-size: 42px;
  line-height: 70px;
  font-weight: bolder;
}
.main_01 p {
  font-size: 18px;
  line-height: 34px;
}
.main_02 {
  /* padding: 0 0px; */
  overflow: hidden;
}
/* 第二部分区域 */
.aside {
  background-color: #fff;
  text-align: center;
  padding: 10px;
  margin: 20px 0;
  border: 2px solid rgba(9, 9, 9, 0.03);
}
.aside_01 {
  margin: 10px;
}
.aside_02 {
  margin: auto 10px;
  padding: auto 10px;
}
.aside_02 h2 {
  font-size: 32px;
  font-weight: bold;
  text-align: left;
}
.aside_02 p {
  font-size: 16px;
  text-indent: 2em;
  text-align: left;
}
.aside_02 li {
  padding: 20px;
  display: inline-block;
  text-align: center;
}
.aside_02 li span {
  font-size: 32px;
  color: #00d584;
}
.aside_02 li i {
  font-style: normal;
  font-weight: bolder;
}
/* 第三部分区域 */
.three {
  text-align: center;
  color: #000;
  border: 2px solid rgba(9, 9, 9, 0.03);
}
.three h3 {
  font-size: 32px;
  font-weight: bold;
  margin: 30px auto;
}
.three p {
  font-size: 16px;
}
.three ul li {
  background-color: #fff;
  padding: 10px;
  margin: 10px;
  border: 2px solid rgba(3, 3, 3, 0.05);
}
.three a {
  text-decoration: none;
  color: #000;
}
.three a .el-image {
  height: 165px;
}
.three a h4 {
  font-size: 22px;
  font-weight: bold;
}
.three a p {
  height: 68px;
  overflow: hidden;
  /* 单行超出显示省略号
  white-space: nowrap;
  text-overflow: ellipsis; */
  /* 在第三行结尾显示省略号 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: #666;
}
/* 招聘栏 */
.adv {
  background-color: #00d584;
  padding: 10px 20px;
  margin: 20px auto;
}
.adv h3 {
  font-size: 36px;
  font-weight: bold;
}
.adv p {
  font-size: 18px;
}
/* 底部区域 */
.footer {
  background-color: #999;
  overflow: hidden;
}
.footer_01 {
  width: 90%;
  color: #fff;
  margin: 20px auto 0;
  text-align: center;
}
/* 底部左侧导航栏 */
.footer_01 h2 {
  font-size: 32px;
  margin-bottom: 20px;
}
.footer_01 ul li {
  display: inline;
}
.footer_01 ul li a {
  display: inline-block;
  padding: 0 10px;
  text-decoration: none;
  color: #fff;
  font-size: 18px;
}
.footer_01 ul li a:hover {
  color: rgb(6, 113, 185);
}
/* 底部右侧联系方式 */
.footer_01 h5 {
  font-size: 18px;
}
.footer_01 p {
  font-size: 14px;
}
.foot {
  text-align: center;
  background-color: #dedede;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
}
.foot p {
  font-size: 16px;
}
</style>>
